<template>
  <div class="advanced-container">
  <!-- !showDialog   -->
    <searchCate
      v-show="!showDialog"
      class="search-cate"
      :treeData="treeData"
      @loadFilterLabel="loadFilterLabel"
    />
  <!--  !showDialog  -->
    <div v-show="!showDialog" class="search-filters-wrap">
      <searchFilters
        :filter1="filter1"
        :filter2="filter2"
        :filter4="filter4"
        @getSave="getSave"
        @handleEmptyData="handleEmptyData"
        :isLast="isLast"
        :sortMainTableNo="sortMainTableNo"
        btn1="检索"
        btn2="重置"
      ></searchFilters>
    </div>
  <!--   showDialog -->
    <searchDialog
      v-show="showDialog"
      :searchDialogVisible="searchDialogVisible"
      :filterConditions="filterConditions"
      :tableLabel="tableLabel"
      :tableList="tableList"
      :sortList="sortList"
      @closeDialog="closeDialog"
      :handleCheckChange="handleCheckChange"
      :filter1="filter1"
      :filter2="filter2"
      :filter4="filter4"
      :treeData="treeData"
      :loadFilterLabel="loadFilterLabel"
      :handleEmptyData="handleEmptyData"
      :getSave="getSave"
    />
  </div>
</template>

<script>
import searchFilters from '@/components/searchFilters'
import searchCate from '@/views/search/advanced/components/searchCate'
import searchDialog from '@/views/search/advanced/components/searchDialog'
import { getAndOr, getBiggerSmaller, getFilterLabel, getQueryList, getTreeList } from '@/api/search/advanced'

export default {
  name: 'advancedIndex',
  components:{
    searchFilters,
    searchCate,
    searchDialog
  },
  data() {
    return {
      showDialog:false,
      treeData: [],
      filter1:[],// 过滤条件1
      isLast:'',
      sortMainTableNo:'',
      filter2:[],// 过滤条件2
      filter4:[],// 过滤条件4
      searchDialogVisible:true,
      filterConditions:'',
      searchValue:'',
      // 表头
      tableLabel:[
          {label: '主键', width: '', prop: 'id'},
          {label: '名称', width: '', prop: 'hname'},
          {label: '操作', width: '', prop: 'area',isOpera: true,showView:true,showBrowse:true}
      ],
     // 表体
      sortList:[
        {id: "2", hname: "222", tableName: "zx_a"},
        {id: "1", hname: "111", tableName: "zx_a"}
      ],
      tableList:[
        {label: '主键', width: '', prop: 'id'},
        {label: '名称', width: '', prop: 'hname'},
        {label: '操作', width: '', prop: 'area',isOpera: true,showView:true,showBrowse:true}
      ],
    }
  },
  created(){
    this.loadTreeList()
    this.loadBiggerSmaller()
    this.loadAndOr()
  },
  mounted() {
    this.$bus.$on('getInputValue',(data) => {
      if(!data){
        this.isLast = ''
      }
    })
  },
  methods: {
    closeDialog(){
      this.searchDialogVisible = false
    },
    // 点击检索
    async getSave(str,i,val){
      // console.log(str.length)
      this.searchValue = val
      const str1 = str.substring(str.length -2,str.length)
      if( str1 === '并且' || str1 === '或者'){
        this.filterConditions = str.substring(0,str.length-2)
      }else{
        this.filterConditions = str
      }
      if(i === 1 && str1 === ''){
        return this.$message.error('请选择检索条件')
      }
      if(i === 1){
        const res = await getQueryList({
          searchValue:this.searchValue,
          recNo:this.sortMainTableNo
        })
        this.tableLabel= res.rows[0]
        for(let i = 0; i<this.tableLabel.length; i++){
          this.tableLabel[i].label = this.tableLabel[i].fieldAlias
          this.tableLabel[i].prop = this.tableLabel[i].fieldName
        }
        this.tableLabel.push({
          label: '操作',
          width: '',
          prop: '',
          isOpera: true,
          showTableField:false,
          showView:true,
          showBrowse:true
        })
        this.tableList = this.tableLabel
        this.sortList = res.rows[1]
        this.showDialog = true
      }
    },
    // 获取树形数据
    async loadTreeList(){
      const res = await getTreeList()
      this.treeData = res.rows
    },
    // 获取大于小于查询条件
    async loadBiggerSmaller(){
      const res = await getBiggerSmaller()
      this.filter2 = res.data
    },
    // 获取并且或者查询条件
    async loadAndOr(){
      const res = await getAndOr()
      this.filter4 = res.data
    },
    // 子组件传递的sortItem
    async loadFilterLabel(sortItem){
      // console.log(135,sortItem)
      this.isLast = sortItem.isLast
      this.sortMainTableNo = sortItem.sortMainTableNo
      if(sortItem.isLast !== '0'){
        return
      }
      if(!this.sortMainTableNo){
        return this.$confirm('当前表没有设置任何"列表显示"字段，请重新设置后查询', '提示', {
          confirmButtonText: '前往设置',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/sorts/tablesorts')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
      const res = await getFilterLabel({fieldName:'',recNo:sortItem.sortMainTableNo})
      this.filter1 = res.rows
      this.filter1.forEach(item => {
        item.dictLabel = item.fieldAlias
        item.dictValue = item.fieldName
      })
    },
    // 处理filter1为空数据时
    handleEmptyData(){
      // console.log(165,this.isLast)
      if(this.isLast !== '0'){
        this.$message.info('请选择检索底层分类')
        this.filter1 = []
      }
      if(!this.sortMainTableNo && this.isLast === '0'){
        this.$message.info('请设置"列表显示"字段')
        this.filter1 = []
      }
    },
    // 处理隐藏表格列
    handleCheckChange(val){
      this.tableLabel = this.tableList.filter(item => {
        // 如果选中，则设置列显示
        return val.includes(item.label)
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.advanced-container{
  padding: 50px;
  .search-cate{
    padding-top: 20px;
  }
  .search-filters-wrap{
    display: flex;
    justify-content: center;
    padding-top: 20px;
  }
}

</style>
